﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ChiliShopNested.master" AutoEventWireup="true" CodeBehind="ProductThumbnailPage.aspx.cs" Inherits="WebApplication1.Pages.ProductThumbnailPage" %>

<asp:Content ID="ContentHead" ContentPlaceHolderID="ChiliShopNestedMasterHeadPlaceHolder" runat="server">
    <link href="/Plugins/jPages-master/css/animate.css" rel="stylesheet" />
    <link href="/Plugins/jPages-master/css/jPages.css" rel="stylesheet" />
    <script src="/Plugins/jPages-master/js/jPages.min.js"></script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="ChiliShopNestedMasterContentPlaceHolder" runat="server">
    <div class="products">
        <%--<div class="paging">
            <div class="first">
                <h2>Beauty Care</h2>
                <span>Show</span>
                <ul>
                    <li class="selected"><a href="#">8</a></li>
                    <li><a href="#">10</a></li>
                    <li><a href="#">25</a></li>
                    <li><a href="#">50</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li class="selected"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>
                    <li>...</li>
                    <li><a href="#">34</a></li>
                </ul>
                <a href="#">next</a>
            </div>
        </div>--%>

        <script type="text/javascript">
            $(document).ready(function () {
                $("div.holder").jPages({
                    containerID: "itemContainer",
                    previous: "←",
                    next: "→",
                    perPage: 8,
                    startPage: 1,
                    startRange: 1,
                    midRange: 1,
                    endRange: 1,
                    direction: "random",
                    animation: "flipInY"
                });
            });
        </script>


        <!-- navigation holder -->
        <div class="holder"></div>

        <!-- item container -->
        <asp:ListView ID="listProducts" runat="server">
            <LayoutTemplate>
                <ul id="itemContainer">
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li>
                    <div style="width: 170px; height: 220px; display: inline-block;vertical-align: middle;">
                        <a href="<%#Eval("DetailPageLink")%>" style="vertical-align: middle">
                            <img src="<%#Eval("ImagePath")%>" alt="product has no image" />
                        </a>
                    </div>
                    <h4><%#Eval("Name")%></h4>
                    <p><%#Eval("Description")%></p>
                    <span>Price:<%#Eval("Price")%></span>
                </li>
            </ItemTemplate>
            <EmptyDataTemplate>
                <p>Nothing here.</p>
            </EmptyDataTemplate>
        </asp:ListView>
    </div>
</asp:Content>
